// 定义缓存空间名称
const version = 'version4'; //修改此值可以强制更新缓存
// 定义需要缓存的文件目录
const fileList = [
    './index.html',
    './src/index.js',
    './assets/css/layout.css',
    './assets/images/bg1.jpg',
    './assets/images/bg2.jpg',
];

// 监听install事件，回调中缓存所需文件
self.addEventListener('install', (e) => {
    console.log('Service Worker 状态： instal');
    this.skipWaiting(); // 强制更新sw.js
    e.waitUntil(
        // cacheStorage API 可直接用caches来替代
        // open方法创建/打开缓存空间，并会返回promise实例
        // then来接收返回的cache对象索引
        caches.open(version).then(function (cache) {
            // cache对象addAll方法解析（同fetch）并缓存所有的文件
            return cache.addAll(fileList);
        })
    );
});

// 拦截所有请求事件
// 如果缓存中已经有数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', (e) => {
    console.log('处理fetch事件:', e.request.url);
    e.respondWith(
        caches
            .match(e.request)
            .then(function (response) {
                if (response) {
                    console.log('缓存匹配到res:', response.url);
                    return response;
                }
                console.log('缓存未匹配对应request,准备从network获取', caches);
                return fetch(e.request);
            })
            .catch((err) => {
                console.error(err);
                return fetch(e.request);
            })
    );
});

// // 监听active事件
self.addEventListener('activate', (event) => {
    // 获取所有的缓存key值，将需要被缓存的路径加载放到缓存空间下
    const cacheDeletePromise = caches.keys().then((keyList) => {
        console.log('keyList:', keyList);
        Promise.all(
            keyList.map((key) => {
                if (key !== version) {
                    const deletePromise = caches.delete(key);
                    //告诉用户需要重新刷新
                    console.log('need reload');
                    self.clients.matchAll().then(function (clients) {
                        clients.forEach(function (client) {
                            client.postMessage({
                                command: 'reload',
                                message: 'test',
                            });
                        });
                    });
                    return deletePromise;
                } else {
                    Promise.resolve();
                }
            })
        );
    });
    // 等待所有的缓存都被清除后，直接启动新的缓存机制
    event.waitUntil(
        Promise.all([cacheDeletePromise]).then((res) => {
            this.clients.claim();
        })
    );
});
